﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS选择器</title>
    <script src="../../课件/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    $(function(){
//      /*// document.getElementById('sex').value = 'female';
//      // jquery对象转成原生对象的方法
//      $('#sex').value = 'female';
//
//      // 当值改变时触发
//      $('#sex').get(0).onchange = function(){
//          alert(11)
//      }
//
//      //document.getElementById('username')
//      $('#username')[0].onchange = function(){
//          alert(this.value);
//      }
//      
//      console.log($(':button'));*/
//
//      /*
//          .val()等同于原生js中的value
//          .html()等同于原生js中的innerHTML
//          **无参数时为取值，带参数时为赋值**
//       */
//      $('#username')[0].value = '王尼玛';
//      $('#username').val('王铁锤');
//      $('#sex').val('female');
//
//      $('.center input').eq(1).val('再见');
//      // $('.center button[type=submit]').val('提&nbsp;交')
//      $('.center button[type=submit]').html('提 &nbsp; 交')
//
//      $('label[for]').html(function(index,_html){
//          $(this).html(_html + "：");
//      });

        $('#username')[0].value = '王尼玛';
        $('#username').val('wang');
        $('#nickname').val('黑仔');
        $(':password').val('123');
        $('#sex').val('male');
    })
       
       
    </script>
</head>

<body>
    <form>
        <p>
            <label for="username">用户名</label>
            <input type="text" id="username" placeholder="请输入用户名">
        </p>
        <p>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" placeholder="输入一个昵称">
        </p>
        <p>
            <label for="password">密码</label>
            <input type="password" id="password">
        </p>
        <p>
            <label for="passwordchecked">确认密码</label>
            <input type="password" id="passwordchecked">
        </p>
        <p>
            <label for="sex">性别</label>
            <select id="sex">
                <option value="male">男</option>
                <option value="female">女</option>
            </select>
        </p>
        <p>
            <label for="">爱好：</label>
            <label>
                <input type="checkbox" value="1">旅游</label>
            <label>
                <input type="checkbox" value="2">睡觉</label>
            <label>
                <input type="checkbox" value="3">上网</label>
                <label>
                <input type="checkbox" value="4">看电影</label>
        </p>
        <p>
            <label for="">是否已婚：</label>
            <label>
                <input type="radio" value="1" name="married">是</label>
            <label>
                <input type="radio" value="0" name="married">否</label>
        </p>
        <div class="center">
            <input type="hidden" value="注册表单">
            <input type="button" value="返回" />
            <button type="submit">提交</button>
            <button type="reset">重置</button>
        </div>
    </form>
    <div class="msg"></div>

    </form>
</body>